<template>
  <div  class="showlist" >
    <el-result v-if="initshow || queryString===null"  title="请输入文字点击查询，选择不同平台热榜查看"   style="height: 500px;background: white">
      <template slot="icon">
        <el-image src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-image>
      </template>
    </el-result>
    <el-result v-if="resultshow " :title="title"   style="height: 500px;background: white">
      <template slot="icon">
        <el-image src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-image>
      </template>
    </el-result>
    <div v-if="datashow">
      <el-table  :data="hotList"  >
        <el-table-column label="热搜id" align="center" prop="id" width="100"/>
        <el-table-column label="热搜排名" align="center" prop="ranking" width="100"/>
        <el-table-column label="热搜标题" align="center" prop="topic" width="300"/>
        <el-table-column label="热搜热度" align="center" prop="hot" width="150"/>
        <el-table-column label="热搜日期" align="center" prop="daydate" width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.daydate }}</span>
          </template>
        </el-table-column>
        <el-table-column label="热搜时间" align="center" prop="mindate" width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.mindate }}</span>
          </template>
        </el-table-column>
        <el-table-column label="链接" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <a :href="scope.row.url" target="_blank" style="color:black;text-decoration-line: none">查看</a>
          </template>
        </el-table-column>
      </el-table>
      <div class="home-page">
        <el-pagination :current-page=currentPage
                       :page-size=pageSize
                       :total="total"
                       background
                       layout="prev, pager, next"
                       @current-change=search>
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "SearchShow",
  props:['webname','queryString'],
  data() {
    return {
      title: '',
      datashow: false,
      resultshow:false,
      hotList:[],
      bdhotList: [],
      jrhotList: [],
      txhotList: [],
      wbhotList: [],
      initshow: true,
      currentPage: 1,
      total: 0,
      pageSize: 10,
      checkboxGroup: [],
    }
  },
  methods:{
    search(currentPage) {
      const _this = this
      _this.initshow=false
      _this.datashow=true
      _this.resultshow=false
      var api
      if (_this.webname==='腾讯新闻'){
        api = this.$base_url+'search/tx'+'?queryString=' + _this.queryString +'&&currentPage=' + currentPage +'&&pageSize=' + _this.pageSize
      } else if (_this.webname==='今日头条'){
        api = this.$base_url+'search/jr'+'?queryString=' + _this.queryString +'&&currentPage=' + currentPage +'&&pageSize=' + _this.pageSize
      } else if (_this.webname==='百度热搜'){
        api = this.$base_url+'search/bd'+'?queryString=' + _this.queryString +'&&currentPage=' + currentPage +'&&pageSize=' + _this.pageSize
      } else if (_this.webname==='微博热搜'){
        api = this.$base_url+'search/wb'+'?queryString=' + _this.queryString +'&&currentPage=' + currentPage +'&&pageSize=' + _this.pageSize
      } else {
        api = this.$base_url+'search/wb'+'?queryString=' + _this.queryString +'&&currentPage=' + currentPage +'&&pageSize=' + _this.pageSize
      }
      this.$axios.get(api).then(res => {
        if (res.data.code === 200){
          _this.hotList = res.data.data.records
          _this.total = res.data.data.total
          _this.currentPage = res.data.data.current
          _this.pageSize = res.data.data.size
          //获取数据重新刷新页面
          _this.datashow=false
          _this.$nextTick(()=>{
            _this.datashow=true
          })
          if (_this.total===0){
            _this.resultshow=false
            _this.$nextTick(()=>{
              _this.resultshow=true
              _this.datashow=false
            })
            _this.title='没有该结果，请重新输入'
          }
        } else if (res.data.code === 403){
          _this.title=res.data.msg
          _this.datashow=false
          //获取数据重新刷新页面
          _this.resultshow=false
          _this.$nextTick(()=>{
            _this.resultshow=true
          })
        }
      })
    },
  },
  mounted() {
  },
  watch:{
    queryString(val){
      const _this = this
      if (_this.queryString!==null){
        this.search(1)
        //获取数据重新刷新页面
        _this.countView=false
        _this.$nextTick(()=>{
          _this.countView=true
        })
      }

    },
    webname(val){
      const _this = this
      if (_this.queryString!==null){
        this.search(1)
        //获取数据重新刷新页面
        _this.countView=false
        _this.$nextTick(()=>{
          _this.countView=true
        })
      }

    },
  },
}
</script>

<style scoped>
.showlist{
  width: 1000px;
  max-height: 400px;
  margin-left: auto !important;
  margin-right: auto !important;
}
</style>